<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <template>
                <div style="width:100%;">
                    <div style="float:left;width:50%">
                        <table style="font-size:12px" class="table1style">
                            <tr>
                                <td>快速查询</td>
                                <td>
                                    <el-input v-model.trim="txtsearch" placeholder="标本类型代码或名称或输入码" style="width:200px" clearable @keyup.native.enter="InitPage"></el-input>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div style="float:left;width:50%;">
                        <table style="float:right">
                            <tr>
                                <td>
                                    <el-button type="primary" @click="InitPage" icon="el-icon-search" v-has="'PINQUERY'">查询</el-button>
                                </td>
                                <td>
                                    <el-button @click="btnAdd" icon="el-icon-plus" v-has="'PADD'">新增</el-button>
                                </td>
                                <td>
                                    <el-button @click="btnDelete" icon="el-icon-delete" v-has="'PDELETE'">删除</el-button>
                                </td>

                                <td>
                                    <el-button @click="SaveRecord" icon="el-icon-document">保存</el-button>
                                </td>
                                <td>
                                    <el-button @click="btnPrintDict" icon="el-icon-printer">打印</el-button>
                                </td>
                                <td>
                                    <el-button @click="RecordExport" icon="el-icon-upload2" v-has="'PEXPORT'">导出</el-button>
                                </td>
                                <!-- <td>
                                    <el-divider direction="vertical"></el-divider>
                                </td>
                                <td>
                                    <el-button @click.native="detailEdit('E')">编辑明细</el-button>
                                </td> -->
                            </tr>
                        </table>
                    </div>
                </div>
            </template>
        </div>
        <div class="pagecenter">
            <div class="middle-center" style="height:100%;">
                <rm-layout-right splitcolor="white" movingcolor="#00ffff" :splitwidth=5 :fixsize=460>
                    <template v-slot:fix>
                        <div style="height:100%;">
                            <vxe-table :loading="rloading" :data.sync="rightlist" border fit :mouse-config="{selected: true}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon:false}" :keyboard-config="keyConfig" height="auto" header-align="center" highlight-current-row highlight-hover-row ref="rxTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe :row-class-name="RowClassName">
                                <vxe-table-column field="comm_name" title="备注" width="405" sortable :edit-render="{name:'input',autoselect: true}">
                                </vxe-table-column>
                                <vxe-table-column field="default_flag" title="默认" width="50" sortable align="center">
                                    <template v-slot="{row}">
                                        <el-checkbox v-model="row.default_flag" true-label="1" false-label="0" @change="detailEdit('K',row)"></el-checkbox>
                                    </template>
                                </vxe-table-column>
                                <template v-slot:fix>
                                    <div style="font-size:17px;text-align:center;background-color:#fff;overflow:auto;padding:3px">
                                        <el-button @click.native="detailEdit('A')" class="el-button--310">新增</el-button>
                                        <el-button @click.native="detailEdit('D')" class="el-button--310">删除</el-button>
                                        <el-button @click="detailEdit('S')" class="el-button--310">保存</el-button>
                                        <el-button @click="detailEdit('C')" class="el-button--310">取消</el-button>
                                    </div>
                                </template>
                            </vxe-table>
                        </div>
                    </template>

                    <div style="height:100%;width:100%;">
                        <vxe-table :loading="loading" :data.sync="tableData" :row-class-name="rowClassName" @current-change="currentChangeEvent" border fit :mouse-config="{selected: true}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon:false}" @edit-actived="CellActive" :keyboard-config="keyConfig" height="auto" :edit-rules="xTable_validRules" header-align="center" @edit-closed="EditChange" highlight-current-row highlight-hover-row ref="xTable" :sort-config="{ trigger: 'cell' }" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe>
                            <vxe-table-column type="index" title="NO." width="50" align="center"></vxe-table-column>
                            <vxe-table-column field="specimen_code" title="标本类型代码" width="90" :edit-render="{name:'input',autoselect: true}" sortable>
                            </vxe-table-column>
                            <vxe-table-column field="specimen_name" title="标本类型名称" width="120" sortable :edit-render="{name:'input',autoselect: true}">
                            </vxe-table-column>
                            <vxe-table-column field="specimen_enname" title="英文名称" width="80" sortable :edit-render="{name:'input',autoselect: true}">
                            </vxe-table-column>
                            <vxe-table-column field="specimentype" title="标本归类" width="70" sortable :edit-render="{name:'select',options: specimenTypeOption}" align="center">
                            </vxe-table-column>
                            <vxe-table-column field="hiscode" title="HIS中代码(或名称)" width="120" sortable :edit-render="{name:'input',autoselect: true}"></vxe-table-column>
                            <vxe-table-column field="nogermflag" title="无菌标本" width="70" sortable align="center">
                                <template v-slot="{row}">
                                    <el-checkbox v-model="row.nogermflag" true-label="1" false-label="0"></el-checkbox>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column field="alertrules" title="细菌培养阳性危急值提示" width="160" sortable :edit-render="{name:'input',autoselect: true}"></vxe-table-column>
                            <vxe-table-column field="alertouthours" title="危急值时效" width="80" sortable align="center" :edit-render="{name:'input',autoselect: true}"></vxe-table-column>
                            <vxe-table-column field="recchange" title="签收确认更改" width="90" sortable align="center">
                                <template v-slot="{row}">
                                    <el-checkbox v-model="row.recchange" true-label="1" false-label="0"></el-checkbox>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column field="inputcode" title="拼音码" width="90" sortable :edit-render="{name:'input',autoselect: true}"></vxe-table-column>
                            <vxe-table-column field="seq" title="序号" width="50" sortable align="center" :edit-render="{name:'input',autoselect: true}"></vxe-table-column>
                            <vxe-table-column field="whocode" title="WhoNet英文代码" width="100" sortable align="center" :edit-render="{name:'input',autoselect: true}"></vxe-table-column>
                            <vxe-table-column field="whona" title="WhoNet数字代码" width="100" sortable align="center" :edit-render="{name:'input',autoselect: true}"></vxe-table-column>
                        </vxe-table>
                    </div>
                </rm-layout-right>
            </div>
        </div>

        <!-- <el-dialog title="编辑明细" :visible.sync="detaildialog" width="500px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false">
            <div style="height:340px;width:100%">
                <vxe-table :loading="loading" :data.sync="rightlist" border fit :mouse-config="{selected: true}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon:false}" :keyboard-config="keyConfig" height="auto" header-align="center" highlight-current-row highlight-hover-row ref="pxTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe>
                    <vxe-table-column type="index" title="NO." width="50" align="center"></vxe-table-column>
                    <vxe-table-column field="specimen_code" title="标本类型代码" width="100" sortable>
                    </vxe-table-column>
                    <vxe-table-column field="comm_name" title="备注名称" width="140" sortable :edit-render="{name:'input',autoselect: true}">
                    </vxe-table-column>
                    <vxe-table-column field="default_flag" title="默认" width="50" sortable align="center">
                        <template v-slot="{row}">
                            <el-checkbox v-model="row.default_flag" true-label="1" false-label="0"></el-checkbox>
                        </template>
                    </vxe-table-column>
                </vxe-table>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click.native="detailEdit('A')" icon="el-icon-plus">新增</el-button>
                <el-button @click.native="detailEdit('D')" icon="el-icon-delete">删除</el-button>
                <el-button @click="detailEdit('S')" icon="el-icon-document">确 定</el-button>
                <el-button @click="detaildialog = false" icon="el-icon-close">取 消</el-button>
            </span>
        </el-dialog> -->
    </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
    name: "MNG221",
    data() {
        return {
            tableData: [],
            message: "",
            curselectrow: "",
            txtsearch: "",
            specimen_codestr: "",
            watchValue: "",
            actionindex: 0,
            tempindex: 0,
            loading: false,
            ishsow: false,
            specimenTypeOption: [],
            keyConfig: {
                isArrow: true,
                isDel: true,
                isTab: true,
                isEdit: true,
            },
            rloading: false,
            detailchangeflag: false,
            rightlist: [],
            detail: [],
            xTable_validRules: {
                specimen_code: [{ required: true, message: "标本类型代码必须填写" }],
                specimen_name: [{ required: true, message: "标本类型名称必须填写" }],
            },
        };
    },
    watch: {
        // txtsearch(val, oldval) {
        //     if (this.list.length > 0) {
        //         this.$nextTick(() => {
        //             var row = this.$refs.xTable.getCurrentRow();
        //             if (this.$refs.xTable.tableData.length > 0) row = this.$refs.xTable.tableData[0];
        //             if (row.specimen_code) {
        //                 this.$refs.xTable.setCurrentRow(row);
        //                 this.tempindex = this.$refs.xTable.getRowIndex(row);
        //                 this.queryRight(row);
        //             }
        //         });
        //     } else {
        //         this.rightlist = [];
        //         this.detail = [];
        //     }
        // },
    },
    computed: {
        // list() {
        //     let filterName = this.txtsearch.trim();
        //     if (filterName) {
        //         let rest = this.tableData.filter((item) => {
        //             return item.specimen_code.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || item.specimen_name.indexOf(filterName) > -1 || (item.inputcode ? item.inputcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false);
        //         });
        //         return rest;
        //     } else {
        //         return this.tableData;
        //     }
        // },
    },
    created() {
        this.InitPage(); //初始化主列表
        this.ddlInitialList(); //初始化下拉框列表
    },
    mounted() {},
    updated() {},
    methods: {
        detailEdit(flag, row) {
            if (flag == "A") {
                //新增
                if (this.actionindex == 1) {
                    this.$alert("请先保存左侧数据后再编辑明细数据！", "提示");
                    return false;
                }
                if (!!this.curselectrow.specimen_code) {
                    this.$refs.rxTable.insert({ specimen_code: this.curselectrow.specimen_code, comm_name: "", default_flag: "0" }).then(({ row }) => {
                        this.$refs.rxTable.setActiveRow(row, "comm_name");
                        this.$refs.rxTable.setCurrentRow(row);
                        this.detailchange(1);
                    });
                } else {
                    this.$alert("没有获取到标本类型代码，请检查选中行是否存在标本类型代码！");
                }
            } else if (flag == "D") {
                //删除
                this.$table.DelRecordSelect(this.$refs.rxTable, -1, this);
                this.detailchange(1);
            } else if (flag == "S") {
                //保存
                this.detailEditSave()
                    .then((res) => {
                        if (res.errcode == "1") {
                            this.$pub.message(this, "明细保存成功！", "success");
                            this.detailchange(0);
                            this.queryRight(this.curselectrow);
                        } else {
                            this.$alert(res.errmsg, "明细保存失败！");
                        }
                    })
                    .catch((e) => {
                        this.$alert(e, "出错");
                    });
            } else if (flag == "K") {
                //checkbox勾选
                let data = this.$refs.rxTable.getTableData().fullData;
                if (row.default_flag == "1") {
                    let datas = data.filter((m) => m.comm_name != row.comm_name);
                    datas.forEach((item) => {
                        item.default_flag = "0";
                    });
                }
                this.detailchange(1);
            } else if (flag == "C") {
                //取消
                this.detailchange(0);
                this.queryRight(this.curselectrow);
            } else {
            }
        },
        detailEditSave() {
            return this.$tool.request({
                url: "MNG/MNG2/MNG221",
                method: "post",
                data: {
                    action: "detailEditSave",
                    urec: this.$refs.rxTable.getRecordset(),
                },
            });
        },
        //查询
        InitPage() {
            this.actionindex = 2; //修改
            this.loading = true;
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG221",
                    method: "post",
                    data: {
                        action: "query",
                        txtsearch: this.txtsearch,
                    },
                })
                .then((res) => {
                    this.tableData = res;
                    this.curselectrow = this.tableData.find((m) => m.specimen_code == this.specimen_codestr);
                    if (!this.curselectrow) {
                        this.curselectrow = res[0];
                    }
                    if (!!this.curselectrow) {
                        this.$refs.xTable.setCurrentRow(this.curselectrow);
                        this.$refs.xTable.scrollToRow(this.curselectrow);
                        this.queryRight(this.curselectrow);
                    } else {
                        this.nodatafun();
                    }

                    this.loading = false;
                })
                .catch((e) => {
                    this.$alert(e, "出错");
                    this.loading = false;
                });
        },

        nodatafun() {
            this.tableData = [];
            this.detail = [];
            this.rightlist = [];
        },
        rowClassName({ row }) {
            let isDirty = this.$refs.xTable.hasRowChange(row);
            if (isDirty) {
                return "row-modify";
            }
            if (this.$refs.xTable.hasRowInsert(row)) return "row-new";
        },
        detailchange(index) {
            //1:数据改变0:数据未变
            if (index == "1") {
                this.detailchangeflag = true;
            } else {
                this.detailchangeflag = false;
            }
        },
        currentChangeEvent({ row, rowIndex }) {
            console.log(this.detailchangeflag);
            if (this.detailchangeflag) {
                this.detailEditSave()
                    .then((res) => {
                        if (res.errcode == "1") {
                            this.$pub.message(this, "明细保存成功！", "success");
                            this.detailchange(0);
                            this.rowChange(row, rowIndex);
                        } else {
                            this.$alert(res.errmsg, "明细保存失败！");
                            this.$refs.xTable.setCurrentRow(this.curselectrow);
                        }
                    })
                    .catch((e) => {
                        this.$alert(e, "出错");
                    });
            } else {
                this.rowChange(row, rowIndex);
                this.detailchange(0);
            }
        },
        rowChange(row, rowIndex) {
            this.actionindex = 2; //修改
            this.tempindex = rowIndex;
            this.curselectrow = row;
            this.queryRight(row);
        },
        queryRight(row) {
            this.rloading = true;
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG221",
                    method: "post",
                    data: {
                        action: "queryRight",
                        specimen_code: row.specimen_code,
                    },
                })
                .then((res) => {
                    this.rightlist = res.data;
                    if (res.data.length > 0) {
                        this.$refs.rxTable.setCurrentRow(res.data[0]);
                    }
                    this.detail = XEUtils.clone(res.data, true);
                    this.rloading = false;
                })
                .catch((e) => {
                    this.$alert(e, "出错");
                    this.rloading = false;
                });
        },
        btnAdd() {
            let data = this.$refs.xTable.getTableData().fullData;
            this.$refs.xTable.insert({ specimentype: "", tube_color: 255, label_print_qty: "0", hiscode: "", nogermflag: "0", recchange: "0", alertrules: "", whocode: "", whona: "", seq: (data.length + 1) * 10, addflag: "1" }).then(({ row }) => {
                this.$refs.xTable.setCurrentRow(row);
                this.$refs.xTable.setActiveRow(row, "specimen_code");
                this.rightlist = [];
                this.detail = [];
            });
            this.actionindex = 1; //增加
            this.FunscrollY();
        },
        FunscrollY() {
            this.$nextTick(() => {
                var alldataLen = this.$refs.xTable.tableData.length;
                let L = this.$refs.xTable.getTableData().fullData[alldataLen - 1];
                this.$refs.xTable.scrollToRow(L);
            });
        },
        btnDelete() {
            let delrow = this.$refs.xTable.getCurrentRow();
            if (delrow) {
                let msg = "您确定要删除这条数据吗？";
                if (!!delrow.specimen_name) msg = '确定删除标本类型名称为<b style="color:red">' + delrow.specimen_name + "</b>的记录吗？";
                this.$confirm(msg, {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    dangerouslyUseHTMLString: true,
                    type: "warning",
                })
                    .then(() => {
                        this.SubmitDel(delrow);
                    })
                    .catch(() => {});
            } else {
                this.$alert("请选择要删除的记录！", "提示");
            }
        },
        SubmitDel(delrow) {
            var alld = this.$refs.xTable.tableData;
            var rowindex = alld.indexOf(delrow);
            this.actionindex = 3; //删除
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG221",
                    method: "post",
                    data: {
                        action: "SubmitDel",
                        urec: delrow,
                    },
                })
                .then((response) => {
                    if (response.errcode == "1") {
                        this.$pub.message(this, "删除成功！", "success");
                        this.$refs.xTable.remove(delrow);
                        let havedata = this.$refs.xTable.tableData;
                        if (havedata.length > 0) {
                            if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                            this.tempindex = rowindex;
                            let selectrow = havedata[rowindex];
                            this.$refs.xTable.setCurrentRow(selectrow);
                            this.queryRight(selectrow);
                            this.message = selectrow.specimen_name;
                        } else {
                            this.nodatafun();
                        }
                        this.actionindex = 2;
                    } else {
                        this.$alert("删除失败！" + response.errmsg, "提示");
                    }
                });
        },
        EditChange({ row, column, rowIndex }) {
            if (column.property == "specimen_name") {
                row.inputcode = this.$pub.CreateInputcode(row.specimen_name, this, 20);
            } else if (column.property == "hiscode") {
                this.$refs.xTable.$refs.tableBody.$children[2 * rowIndex].$el.focus();
            } else if (column.property == "alertouthours") {
                this.$refs.xTable.$refs.tableBody.$children[2 * rowIndex + 1].$el.focus();
            } else if (column.property == "specimen_code") {
                let data = this.tableData.find((m) => m.specimen_code == row.specimen_code && m.addflag == "0");
                if (!!data) {
                    let fdata = this.$refs.xTable.getTableData().fullData.find((m) => m.specimen_code == row.specimen_code && m.addflag == "1");
                    this.$alert("标本类型代码【" + row.specimen_code + "】重复！", "提示").then(() => {
                        //   this.$nextTick(() => {
                        fdata.specimen_code = "";
                        this.$refs.xTable.setActiveRow(fdata, "specimen_code");
                        // });
                    });
                }
                //      this.hasChange();
            }
        },
        //保存
        SaveRecord() {
            this.$refs.xTable.validate((valid) => {
                if (valid) {
                    let data = this.$refs.xTable.getTableData().fullData;
                    this.$pub.ResetSeq(data, "seq");
                    if (this.detailchangeflag) {
                        this.detailEditSave()
                            .then((res) => {
                                if (res.errcode == "1") this.detailchange(0);
                            })
                            .catch((e) => {
                                this.$alert(e, "出错");
                            });
                    }

                    this.$tool
                        .request({
                            url: "MNG/MNG2/MNG221",
                            method: "post",
                            data: {
                                action: "save",
                                urec: this.$refs.xTable.getRecordset(),
                            },
                        })
                        .then((res) => {
                            if (res.errcode == "1") {
                                this.specimen_codestr = res.keyid;
                                this.$pub.message(this, "操作成功！", "success");
                                this.InitPage();
                            } else {
                                this.$alert("保存失败！" + res.errmsg, "提示");
                            }
                        });
                }
            });
        },
        //导出
        RecordExport() {
            this.$refs.xTable.exportCsv({ filename: "MNG221 标本类型字典" });
        },
        //打印
        btnPrintDict() {
            this.$pub.printDict(this, "MNG221 标本类型字典", this.$refs.xTable);
        },
        CellActive({ row, rowIndex, column }) {
            let len = this.$refs.xTable.tableData.length;
            if (rowIndex + 1 >= len) {
                if (row.specimen_code === null) {
                    row.specimentype = "";
                    row.hiscode = "";
                    row.nogermflag = "0";
                    row.alertrules = "";
                    row.recchange = "0";
                    row.whocode = "";
                    row.whona = "";
                    row.label_print_qty = "1";
                    row.tube_color = 255;
                    this.$refs.xTable.setCurrentRow(row);
                    this.actionindex = 1; //新增
                    this.tempindex = this.$refs.xTable.getRowIndex(row);
                }
            }
        },
        ddlInitialList() {
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG221",
                    method: "post",
                    data: {
                        action: "ddlInitialList",
                    },
                })
                .then((response) => {
                    this.specimenTypeOption = response;
                });
        },
        RowClassName({ row, rowIndex }) {
            let isDirty = this.$refs.rxTable.hasRowChange(row);
            if (isDirty) {
                this.detailchange(1);
                return "row-modify";
            }
            if (this.$refs.rxTable.hasRowInsert(row)) {
                this.detailchange(1);
                return "row-new";
            }
        },
    },
};
</script>

<style scoped>
.pagetop {
    width: 100%;
    height: 35px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 99;
}

.pagecenter {
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 0px;
    overflow: auto;
}
.table1style tr td {
    padding: 0px 2px 0px 5px;
}
/deep/.middle-center tr td div .el-input__inner {
    border: 1px solid rgba(255, 254, 254, 0) !important;
    background-color: rgba(255, 254, 254, 0) !important;
}
/deep/ .vxe-table .vxe-body--column.col-orange {
    background-color: #ccc;
}
/deep/ tr.vxe-body--row.row-new {
    color: #cc6600;
}
/deep/ tr.vxe-body--row.row-modify {
    color: blue !important;
}
/deep/.el-checkbox__inner::after {
    border: 2px solid #000000 !important;
    box-sizing: content-box;
    content: "";
    border-left: 0 !important;
    border-top: 0 !important;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform 0.15s ease-in 0.05s;
    transform-origin: center;
}
/deep/.el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #000000;
    cursor: not-allowed;
}
/deep/ .el-checkbox__input.is-disabled .el-checkbox__inner,
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner + .el-input.is-disabled .el-input__inner {
    background-color: #ffffff !important;
}
</style>